<template>
  <div class="continua">
    <div class="content">
      <h3>v-model: - pageNo {{ pageNo }} - pageSize{{ pageSize }}</h3>
      <hr/>
      <!--
         v-model组件身上使用
         第一:相当有给子组件传递props[pageSize] = 3
         第二:相当于给子组件绑定自定义事件update:pageSize
       -->
      <Children v-model:pageNo="pageNo" v-model:pageSize="pageSize"></Children>
    </div>
  </div>
</template>

<script setup>
import Children from "@/components/05组件通讯/03- v-model/children.vue";
import {ref} from "vue";
// v-model指令:收集表单数据,数据双向绑定
// v-model也可以实现组件之间的通信,实现父子组件数据同步的业务
let pageNo = ref(1);
let pageSize = ref(3);


</script>

<style scoped lang="less">
.continua {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  .content {
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
  }
}
</style>
